<template>
  <div>
    <navigationBar
        ref="nav"
        @loginSuccess="handleLoginSuccess"
      @loginClose="handleLoginCancel"/>
    <div class="blog">
      <div class="blog-main">
        <div class="blog-top">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>博客</el-breadcrumb-item>
            <el-breadcrumb-item>博客列表</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="blog-content">
          <div class="blog-item" v-for="blog in blogList">
            <h2 class="title" @click="toBlogDetailed(blog.id)">{{ blog.title }}</h2>
            <div class="content">
              <p>
                {{ blog.overview }}
              </p>
            </div>
            <div class="entry-tags">
              <div class="categories">
                <span>访问量:55</span>
              </div>
              <div class="categories">
                <span>评论数量:45</span>
              </div>
              <div class="categories right">
                <i class="el-icon-s-flag"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageHelp.page"
              :page-sizes="[3, 6, 8, 10]"
              :page-size="pageHelp.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.total">
          </el-pagination>
        </div>
      </div>
      <div class="blog-nav">
        <div class="blog-nav-top">
          <p>
            TOP 6 排行榜
          </p>
          <ul>
            <li v-for="blog in topBlogList" @click="toBlogDetailed(blog.id)">
              <div class="blog-nav-top-title">{{ blog.title }}</div>
              <div class="blog-nav-top-bottom">
                <div>访问量: {{ blog.viewCount }}</div>
                <div>评论数量: {{ blog.commentCount }}</div>
              </div>
            </li>
          </ul>
        </div>

        <div class="blog-nav-top">
          <p>
            博客热门板块
          </p>
          <ul>
            <li v-for="cate in cateList">
              <div class="blog-nav-top-title">{{ cate.name }}</div>
              <div class="blog-nav-top-bottom">
                <div>帖子数: {{ cate.postCount }}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getBlogCateList, getBlogList, getBolgListBySearch} from "../../api";
import navigationBar from "@/components/navigationBar/navigationBar";

export default {
  name: 'blog',
  components: {navigationBar},
  data() {
    return {
      pageHelp: {
        page: 1,
        size: 6,
        property: ''
      },
      blogList: {},
      total: 0,
      topBlogList: {},
      cateList: []
    }
  },
  methods: {
    async getBlogList() {
      let res = await getBlogList(this.pageHelp)
      if (res.success) {
        this.blogList = res.data.records
        this.total = res.data.total
      } else {
        this.$message.error('获取博客列表失败')
      }
    },
    // 获取top6 排行榜
    async getTopBolgList() {
      let res = await getBolgListBySearch(
          1,
          6,
          "",
          'view_count'
      )
      if (res.success) {
        this.topBlogList = res.data.records
      } else {
        this.$message.error('获取排行榜列表失败')
      }
    },
    toBlogDetailed(id) {
      this.$router.push(
          {
            path: '/blog/'+id,
          }
      )
    },
    async getCateList() {
      let res = await getBlogCateList()
      if (res.success) {
        this.cateList = res.data
      } else {
        this.$message.error('查询分类列表失败')
      }
    },
    handleSizeChange(newSize) {
      this.pageHelp.size = newSize
      this.getBlogList()
    },
    handleCurrentChange(newPage) {
      this.pageHelp.page = newPage
      this.getBlogList()
    }
  },
  created() {
    this.getBlogList()
    this.getTopBolgList()
    this.getCateList()
  }
}
</script>

<style scoped lang="scss">
@import "blog";
</style>
